<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3.DOM性能</title>
</head>
<body>
  <!-- DOM性能 -->
  DOM操作非常昂贵，避免频繁的DOM操作
  1.对DOM查询做缓存
  2.将频繁操作改为一次性操作

  <ul id="list">

  </ul>

  <script>
    // 1.缓存DOM操作

    // 不缓存的情况
    /* for (let i = 0;i < document.getElementsByTagName('p').length;i++) {
      // 每次循环都会计算length，频繁进行DOM查询
    }

    // 缓存DOM查询结果
    const pList = document.getElementsByTagName('p')
    const length = pList.length
    for (let i = 0;i<length;i++) {
      // 缓存length 只进行一次DOM查询
    } */
    
    // 2.将频繁操作改为一次性操作
    const listNode = document.getElementById('list')

    // 创建文档片段，此时还没有插入到DOM数中
    const frag = document.createDocumentFragment()

    // 执行插入
    for (let x = 0;x<10;x++) {
      const li = document.createElement('li')
      li.innerHTML = 'List item' + x
      frag.appendChild(li)
    }

    // 都完成后，一起插入到DOM树中
    listNode.appendChild(frag)

    
  </script>

  
</body>
</html>